<!doctype html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style type="text/css">  
            body {  
                background-color: black;  
            }  
  
            .guide-img {  
                width: 100%;  
            }  
  
            #start {  
                position: absolute;  
                bottom: 40px;  
                width: 60%;  
                left: 20%;  
            }  
        </style>  
    </head>  
  
    <body>  
        <div class="mui-content">  
            <div class="mui-slider mui-fullscreen">  
                <div class="mui-slider-group">  
                    <div class="mui-slider-item">  
                        <a href="javascript:;">  
                            <img class="guide-img" src="images/5.png">  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="javascript:;">  
                            <img class="guide-img" src="images/930db7bf7e4948a00ae5eef2cf006010a81597411ee7b-4qg5BF_fw658.jpg">  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="javascript:;">  
                            <img class="guide-img" src="images/20141106214924_GVSd3.jpg">  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="javascript:;"><!--javascript: 是一个伪协议,javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。-->  
                            <img class="guide-img" src="images/5203b524f4134c8fafdff1050c7bcddf_th.jpg">  
                            <button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">开始体验</button>  
                        </a>  
                    </div>  
                </div>  
            </div>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init({
            	tatusBarBackground: '#f7f7f7'
            });
            mui.plusReady(function() {  
                /**  
                 * 获取系统状态栏高度  
                 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight  
                 */  
                var sh = plus.navigator.getStatusbarHeight();  
                /**  
                 * 获取设备屏幕高度分辨率以及宽度分辨率  
                 * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight  
                 * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth  
                 */  
                var h = plus.screen.resolutionHeight;  
                var w = plus.screen.resolutionWidth;  
                /**  
                 * 设置图片高度，这里图片并不规范；  
                 * 实际开发中，建议大家制作iphone6plus规格的图片；  
                 */  
                var imgs = document.querySelectorAll(".guide-img");//获取所有图片  
                for(var i = 0, len = imgs.length; i < len; i++) {  
                    imgs[i].style.height = (h - sh) + "px";  //高度==手机屏幕高-状态栏高
                    imgs[i].style.width = w + "px";  
                }  
                /**  
                 * 手动关闭启动页  
                 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen  
                 */  
                plus.navigator.closeSplashscreen();  
                document.getElementById("start").addEventListener("tap", function() {  
                    /**  
                     * 向本地存储中设置launchFlag的值，即启动标识；  
                     * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem  
                     */  
                    plus.storage.setItem("launchFlag", "true");  
                    mui.openWindow({  
                        url: "tab-webview-main.html",  
                        id: "main",  
                        extras: {  
                            mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；  
                        }  
                    });  
                });  
            });  
            /**  
             * 重写mui.back()，什么都不执行，反之用户返回到入口页；  
             */  
            mui.back = function() {};  
        </script>  
    </body>  
  
</html>  